<template>
  <div class="page1">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide,i) in swiperSlides" :key="i">
        <img :src="slide" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="dl">
      <button>您好，登录会员中心，享受更多特权</button>
    </div>
    <swiper class="swiper1" style="" :options="swiperOption2">
      <swiper-slide class="swiper2" v-for="(slide,i) in swiperSlides2" :key="i">
        <img :src="slide.img" alt="">
        <p>{{slide.name}}</p>
      </swiper-slide>
    </swiper>
    <h2 class="home-discount">
      <span>优惠活动</span>
    </h2>
    <div class="banner">
      <img src="../../static/img/Banner_23_2017_10_20_16_13_26.jpg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'page1',
  data() {
    return {

      swiperSlides: [
        '../../static/img/Banner_1_2017_12_12_14_12_58.jpg', '../../static/img/Banner_1_2017_12_27_14_25_36.jpg', '../../static/img/Banner_1_2017_12_27_14_36_48.jpg'
      ],
      swiperSlides2: [
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
        { img: '../../static/img/foods01.png', name: '39元十翅' },
      ],
      swiperOption: {
        // direction: 'vertical', //竖着
        loop: true,   //轮播

        autoplay: true,//等同于以下设置
        /*autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
          },*/

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true, // 可以点击
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        // },
      },
      swiperOption2: {
        freeMode: true,
        freeModeMomentumBounce: false,
        freeModeMomentumRatio: 0.5,
        slidesPerView: 2.4,
      }
    }
  },
  methods: {
    // open() {
    //   this.$message('这是一条消息提示');
    // },
    // open2() {
    //   this.$message({
    //     message: '恭喜你，这是一条成功消息',
    //     type: 'success'
    //   });
    // },

    // open3() {
    //   this.$message({
    //     message: '警告哦，这是一条警告消息',
    //     type: 'warning'
    //   });
    // },

    // open4() {
    //   this.$message.error('错了哦，这是一条错误消息');
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 37.5 * 1rem;
}

.h(@height) {
  .px2rem(height, @height)
}

.w(@width) {
  .px2rem(width, @width)
}

.f(@font) {
  .px2rem(font-size, @font)
}

.lh(@line-height) {
  .px2rem(line-height, @line-height)
}

.swiper-container {
  width: 100%;
  img {
    width: 100%;
  }
}

.page1 {
  .px2rem(margin-top, 53)
}

.dl {
  .h(50);
  display: flex;
  justify-content: center;
  .px2rem(margin-top, -25);
  position: relative;
  z-index: 666;
  button {
    background: #fff;
    outline: none;
    .f(14);
    width: 80%;
    border: 1px solid #ccc;
    .px2rem(border-radius, 10);
    .f(15)
  }
}

.swiper1 {
  width: 100%;
}

.swiper2 {
  width: calc(80%/3) !important;
  .px2rem(margin, 20);
  .px2rem(margin-left, 20);
  .px2rem(margin-right, 0);
  .px2rem(padding, 8);
  .px2rem(padding-top, 20);
  .px2rem(padding-bottom, 15);
  box-shadow: 0 0 0.6rem #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  .px2rem(border-radius, 10);
  img {
    .w(105);
    .px2rem(margin-bottom, 10);
  }
}

.home-discount {
  padding: .4rem;
  .f(16);
  background: #fff;
  background-size: 4rem;
  text-align: center;
  font-weight: 400;
  span {
    position: relative;
  }
  span:before {
    width: .053333rem;
    height: .026667rem;
    border: 0 solid #e94f4f;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 50%;
    border-width: 0 .053333rem 0 .666667rem;
    left: -.933333rem;
  }
  span:after {
    width: .053333rem;
    height: .026667rem;
    border: 0 solid #e94f4f;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 50%;
    border-width: 0 .666667rem 0 .053333rem;
    right: -.933333rem;
  }
}
.banner{
  img{
    width: 100%;
  }
}
</style>
